<template>
	<view>
	<view style="margin-top: 10px;
		width: 100%;
	margin-right: 10px;
	margin-left: 10px;">
			<swiper :indicator-dots="true" :interval="4000" :duration="1000">
				<swiper-item>
					<image :src="joinUrlList[0]" mode="widthFix"
						style="width:95%;height:150px;border-radius: 6px;" />
				</swiper-item>
				<swiper-item>
					<image :src="joinUrlList[1]" mode="scaleToFill"
						style="width:95%;height:150px;border-radius: 6px;" />
				</swiper-item>
				<swiper-item>
					<image :src="joinUrlList[2]" mode="scaleToFill"
						style="width:95%;height:150px;border-radius: 6px;" />
				</swiper-item>
			</swiper>
			 <view class="contact-section">
			    <view class="contact-item">
			      <text class="label">总部招商热线</text>
			      <text class="number">{{shop.afterPhone}}</text>
			      <text class="button" @click="callPhone(shop.afterPhone)">拨号</text>
			    </view>
			    <view class="contact-item">
			      <text class="label">报价咨询热线</text>
			      <text class="number">{{cardPhone}}</text>
			      <text class="button" @click="callPhone(cardPhone)">拨号</text>
			    </view>
			  </view>
	</view>
		<!-- 拨打售后服务电话 -->
		<view class="fixed-button">
		    <view class="fixed-buttons">
		      <view class="btn" @click="callPhone(shop.afterPhone)">
		        <uni-icons type="phone" size="15" color="white"></uni-icons>
		        <text class="fixed-label">电话</text>
		      </view>
		      <view class="btn" @click="addWeChat">
		        <uni-icons type="weixin" size="15" color="white"></uni-icons>
		        <text class="fixed-label">微信</text>
		      </view>
				  <button open-type="contact" plain="true" size="mini" style="color: white;font-size: 9px;margin-left: -2px;" class="btn">
				  <uni-icons type="headphones" size="15" color="white" style="height: 20px;">
				  </uni-icons>	
				  <text style="white-space: nowrap;">客服</text>
				  </button>
		    </view>
		  </view>
		
		<!-- 切换列表 -->
		<uni-segmented-control :values="tabs" style-type="text" @clickItem="onTabChange"
			active-color="#fe0000" />
		<view>
			<view v-if="deviceMenu=='二手回收'" style="margin-left: 15px;margin-top: 10px;">
			  <view v-for="(item, deviceType) in recycleList" :key="deviceType" >
			    <text class="recycle-price">{{ deviceType }}回收报价</text>
			    <view class="brands">
			      <view v-for="(device, index1) in item" :key="index1" class="brand">
			        <image :src="device.icon" @click="preview(device.price)" class="brand-image" />
			        <text class="brand-name">{{ device.name }}</text>
			      </view>
			    </view>
			  </view>
			</view>
			<view v-else>
				<view v-for="(item, deviceType) in deviceList[deviceMenu]" :key="deviceType">
					<view class="brands">
						<view v-for="(device,index) in item" :key="index" class="brand">
							<image :src="device.icon" @click="preview(device.price)"
								class="brand-image" />
							<text class="brand-name">{{ device.name }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer-container">
			<view class="footer-button-container">
				<button class="order-button" size="mini" @click="callPhone(shop.afterPhone)">回收下单</button>
			</view>
			<view class="contact-container">
				<view class="contact-item">
					<uni-icons type="phone-filled" size="30" />
					<view class="text-container" @click="callPhone(shop.afterPhone)">
						<text style="font-size: 15px;">电话咨询</text>
						<text class="action-text">点击拨打</text>
					</view>
				</view>
				<view class="contact-item">
					<uni-icons type="weixin" size="25" />
					<view class="text-container" @click="copy(shop.wxNumber)">
						<text style="font-size: 15px;">微信咨询</text>
						<text class="action-text">点击复制</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {onMounted,ref} from 'vue';
	import {baseUrl} from '@/config'
	import {getToken} from '../../utils/auth';
	import {onShareAppMessage} from '@dcloudio/uni-app'
	import {cycleDevice,getShopInfo} from '../../api/shop.js';
	const deviceList = ref({})
	const priceList = ref({})
	const tabs = ref([])
	const shop = ref({})
	const cardPhone=ref('')
	const cardQr=ref('')
	const recycleList=ref([])
	const deviceMenu = ref('')
	const joinUrlList=ref([])
	onMounted(async () => {
		onShareAppMessage(async() => {
			return {
				path:'/pages/recycle/index',
				title:'手机电脑批发'
			}
		})
		cardPhone.value=uni.getStorageSync('cardPhone')
		cardQr.value=uni.getStorageSync('cardQr')
		const res = await cycleDevice()
		const urls = await getShopInfo(2)
		shop.value = urls.data
		uni.setStorageSync('recycleAD',shop.value.adUrl)
		deviceList.value = res.data.deviceMap
		priceList.value = res.data.priceMap
		joinUrlList.value=shop.value.joinUrl.split(',').map(item=>item.trim())
		for (var item in deviceList.value) {
			tabs.value.push(item)
		}
		recycleList.value=deviceList.value['二手回收']
		deviceMenu.value = tabs.value[0]
	})
	

const copy = (data) => {
		uni.setClipboardData({
			data: data,
			success: function() {
				uni.showToast({
					title: '已复制',
					icon: 'success'
				})
			}
		});
	}

const addWeChat=()=>{
		uni.navigateTo({
			url:`/pages/qr/index?qr=${cardQr.value}`
		})
	}

	const preview = (urls) => {

		//查询是否登录
		const token=getToken('MiniLogin-Token')
		if(token==null||token==''){
			uni.showModal({
				title:'提示',
				content:'未登录不可查看',
				confirmText:'登录',
				success: (res) => {
					if(res.confirm){
						uni.switchTab({
							url:'/pages/user/miniLogin'
						})
					}else if (res.cancel) {
						console.log('用户点击取消');
						return
					}
				}
			})
		}else{
			uni.previewImage({
				urls: [urls],
				LongPressActions: {
					itemList: ['保存图片'],
					success: function(data) {
						if (data.tapIndex === 0) {
							uni.saveImageToPhotosAlbum({
								filePath: urls,
								success: function() {
									uni.showToast({
										title: '保存成功',
										icon: 'success'
									})
								},
								fail: function() {
									uni.showToast({
										title: '保存图片失败 ',
										icon: 'none'
									})
								}
							})
						}
					}
				},
			})
		}
	}

	const onTabChange = (e) => {
		deviceMenu.value = tabs.value[e.currentIndex]
	};

const callPhone = (phone) => {
		wx.makePhoneCall({
			phoneNumber: phone+'',
			success: function() {
				console.log("拨打电话成功！")
			},
			fail: function() {
				console.log("拨打电话失败！")
			}
		})
	}
</script>

<style scoped>
	.phone {
		display: flex;
		align-items: center;
		border: 1px solid #ff6600;
	}
	.text {
		margin-top: 5px;
		font-size: 12px;
		text-align: center;
		/* 确保文本水平居中 */
	}

	.footer-container {
		text-align: center;
		padding: 20px;
	}

	.footer-button-container {
		margin-bottom: 20px;
	}
.contact-section {
 border: 1px solid #DD2020;
 border-radius: 5px;
 margin-bottom: 8px;
 margin-top: 5px;
 padding: 4px;
 width: 92%;
}

.contact-item {
 display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.label {
  font-size: 16px;
  color: #333;
}

.number {
  font-size: 16px;
  color: #DD2020;
  margin-left: 10px;
}

.button {
  font-size: 14px;
  color: #DD2020;
  cursor: pointer;
}
	.order-button {
		background-color: red;
		color: white;
		border-radius: 300px;
		line-height: normal;
		/* 设置行高以控制高度 */
		height: auto;
		/* 确保高度自动适应内容 */
		width: 80%;
		padding: 10px 0;
		font-size: 16px;
	}

	.contact-container {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.text-container {
		display: flex;
		flex-direction: column;
		/* 垂直排列文字 */
		margin-left: 10px;
		/* 图标与文字之间的距离 */
	}
	
	.fixed-button{
		position: relative;
		z-index: 999;
	}
	
	.fixed-buttons {
	  width: 27px;
	  border-top-left-radius: 7px;
	  border-bottom-left-radius: 7px;
	  position: fixed;
	  right:0;
	  background-color: #333;
	  top: 40%;
	  overflow: hidden;
	}
	
	.btn{
	  display: flex;
	  height: 40px;
	  align-items: center;
	  justify-content: center;
	  flex-direction: column;
	  border-bottom: 1px solid #444;
	}
	
	.btn:last-child {
	  border-bottom: none;
	}
	
	.fixed-label {
	  color: white;
	  font-size: 9px;
	}

	.icons {
		margin-right: 10px;
		width: 40px;
		height: 40px;
		display: block;
		margin: 0 auto;
	}

	.action-text {
		color: gray;
		font-size: 12px;
	}
	.recycle-price {
	  font-size: 15px;
	  margin-left: 15px;
	  font-weight: bold; 
	}

	.brands {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		width: 100%;
		white-space: nowrap;
		/* Adjusted gap for better spacing */
	}

	.brand {
		display: flex;
		flex-direction: column;
		margin-top: 20px;
		align-items: center;
		width: 22%;
		margin-bottom: 5px;
		text-align: center;
	}

	.brand-image {
		width: 50px;
		height: 50px;
		margin-bottom: 5px;
	}

	.brand-name {
		font-size: 12px;
		white-space: nowrap;
	}
</style>